<template>
  <div class="c-title">
    <div class="title-wrap">
      <slot name="title">
        <span class="title">{{ title }}</span>
      </slot>
      <div>
        <slot name="title-right" />
      </div>
    </div>
    <div v-loading="loading" class="content">
      <slot />
    </div>
  </div>
</template>
<script>
export default {
  name: 'CTitle',
  props: {
    title: {
      type: String,
      default: ''
    },
    loading: {
      type: Boolean,
      default: false
    }
  }
}
</script>
<style lang="scss" scoped>
.c-title{
  .title-wrap{
    display: flex;
    justify-content: space-between;
    align-content: center;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    .title {
      color: #16bc83;
      font-size: 16px;
      font-weight: 500;
    }
  }
  .content{
    padding: 10px;
  }
}
</style>
